:root, [data-theme="classic"] {
    --violet800: hsl(252, 44%, 24%);
    --grey900: hsl(200, 15%, 19%);
    --grey700: hsl(200, 11%, 43%);
    --grey600: hsl(200, 13%, 60%);
    --grey200: hsl(200, 17%, 96%);
    --green800: hsl(115, 31%, 31%);
    --green900: hsl(115, 31%, 21%);

    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    --orange-900: #7c2d12;

    --yellow500: hsl(44, 100%, 60%);
    --yellow700: hsl(44, 67%, 50%);

    --header-bg-color: hsl(115, 31%, 20%);

    --transition-x-slow: 1000ms;
    --transition-slow: 500ms;
    --transition-medium: 250ms;
    --transition-fast: 150ms;
    --transition-x-fast: 50ms;
    --transition-instant: 0ms;

    --font-heading: "Fira Sans", sans-serif;
    --font-body: var(--font-heading);
    --font-monospace: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;

    --main-color: #383838;
    --main-color-light: #858585;
    --main-shadow-color: var(--green900);
    --main-bg: #f9f7ec;
    --main-bg-dark: #edebdd;
    --gray-border: #d5d3cb;
    --link-color: rgb(0, 172, 91);
    --link-hover-color: #007940;

    --placeholder-bg: hsl(212, 7%, 57%);
    --placeholder-bg2: hsl(213, 16%, 75%);

    /* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */

    --space-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
    --space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
    --space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
    --space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
    --space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
    --space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
    --space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
    --space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
    --space-2xl: clamp(3.50rem, calc(3.11rem + 1.95vw), 4.50rem);
    --space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);

    /* One-up pairs */
    --space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
    --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
    --space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
    --space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
    --space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
    --space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
    --space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
    --space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem);
    --space-2xl-3xl: clamp(3.50rem, calc(2.23rem + 6.34vw), 6.75rem);

    /* Custom pairs */
    --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
}

[data-theme="new-design"] {
    --header-bg-color: var(--violet800);
    --main-bg: white;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    scroll-behavior: smooth;
}

body {
    background-color: var(--header-bg-color);
    font-family: var(--font-body);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
}

h1 {
    @media only screen and (max-width: 400px) {
        font-size: 1.5em;
    }
}

a, .link {
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;

    &:hover {
        color: var(--link-hover-color);
    }
}

/* Using `:not(...)` here for specificity reasons */
a:not([href]) {
    color: initial;
    cursor: initial;
}

pre:global(.terminal) {
    background: var(--main-color);
    color: white;
    padding: var(--space-s);
    font-family: var(--font-monospace);
}

abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted;
}

noscript {
    display: grid;
    justify-items: center;
    padding: var(--space-m);
    color: white;
}

/* see https://github.com/twbs/bootstrap/pull/30269 */
::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
    padding: 0;
}

::-webkit-calendar-picker-indicator {
    font-size: 0.9em
}

:global {
    .c-notification__icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .c-notification__content {
        line-height: 1.5;
    }
}

.width-limit {
    width: 960px;
    @media only screen and (max-width: 960px) {
        width: 100%;
    }
}

.main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    background-color: var(--main-bg);
    color: var(--main-color);
    box-shadow: 0 0 6px 0 var(--main-shadow-color);
}

.inner-main {
    --main-layout-padding: var(--space-s);

    composes: width-limit;
    display: flex;
    flex-direction: column;
    padding: var(--main-layout-padding);
}

:global(.ember-tooltip) {
    font-weight: normal;
}
